* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html ,body{
    width: 100%;
    min-height: 100%;
    /*background-color: #f0f0d8;*/
    background-color: #fff;
    font-family:'Patrick Hand Sc',"Arial"," Helvetica"," sans-serif","Microsoft YaHei", "SimSun";
    overflow-x:hidden;
}
body{
    height: 100%;
    min-height: 750px;
    background: url(../images/bg-base-1.jpg) repeat;
}
ul li {
    list-style: none;
}
#content {
    width: 80%;
    height: 100%;
    margin: 100px auto 0;
    padding-bottom: 50px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.20);
    position: relative;
    z-index: 10;
    border-top: 5px solid #ea7716;
}

html section{
    display: flex;
    -webkit-justify-content: center;
    width:100%;
    min-height: 100%;
    margin-bottom: 48px;
}

html section button{
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self:center;
    background-color: transparent;
    padding: 16px 16px;
    margin:0 16px;
    transition: all .5s ease;
    color: #41403e;
    font-size: 32px;
    letter-spacing: 1px;
    outline: none;
    box-shadow:20px 50px 34px -26px rgba(0,0,0,0.2);
    border-radius:255px 15px 225px 15px/15px 225px 15px 225px;
}

html section button:hover{
    box-shadow: 2px 8px 4px -6px rgba(0,0,0,0.3);
}
html section button a{
    color:#41403e;
}
html section button a:hover{
    color:#ea7716;
}

.dotted{
    border: dotted 7px #41403e;
}
.lined{
    border: solid 7px #41403e;
}
.dashed{
    border: dashed 5px #41403e;
}
.dotted_thin{
    border:dotted 2px #41403e;
}
.lined_thin{
    border:solid 2px #41403e;
}
.dashed_thin{
    border:dashed 2px #41403e;
}
/* 导航 */
.myhome img{
    width: 37px;
    border-radius: 37px;
    margin: 7px 10px 0 10px;
}
.navbar-logo{
    float: left;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
}

/* 轮播 */
.jq22-header h1{ text-align: center; font-size: 18px; }
section.awSlider .carousel{
    display:table;
    z-index:2;
    -moz-box-shadow: 0 0 4px #444;
    -webkit-box-shadow: 0 0 4px #444;
    box-shadow: 0 0 15px rgba(1,1,1,.5);
}

section.awSlider{
    margin:0 auto;
    margin-bottom: 30px;
    padding:30px;
    position:relative;
    display:table;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

section.awSlider:hover > img{
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity:0;
}

section.awSlider img{
    pointer-events: none;
}

section.awSlider > img{
    position:absolute;
    top:30px;
    z-index:1;
    transition:all .3s;
    filter: blur(1.8vw);
    -webkit-filter: blur(2vw);
    -moz-filter: blur(2vw);
    -o-filter: blur(2vw);
    -ms-filter: blur(2vw);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity:0;//显示背景
}

/* section 内容 */
.title_index h3{
    padding-left: 20px;
    height: 50px;
    width: 260px;
    line-height: 50px;
    background: url(../images/menu-bg-1.jpg) repeat-x;
    margin-left: -15px;
}
.title_index h3 a{
    color:#fff;
}
.title_index h3 a:hover{
    color:#ea7716;
}
.title_index>span {
    display: block;
    width: 10px;
    height: 57px;
    float: left;
    background: url("../images/title-left-right-1.png") no-repeat;
    margin-left: -25px;
}
.title_index h4 {
    margin: 0 auto;
    width:250px;
    height: 50px;
    line-height: 50px;
    /*background-color: #627e87;*/
    background-color: #400A0A;
    color: #fff;
    opacity: .9;
}
.article_title {
    display: block;
    border: 5px solid #ea7716;
    color: #ea7716;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 20px auto 30px;
    font-size: 24px;
    line-height: 50px;
}
.title_index ul li {
    height: 30px;
    width: 100%;
    background: url(../images/li.png) no-repeat 0 3px;
    padding-left: 6%;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.title_index ul li a{
    color:#3b3b39;
    width: 220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 文章列表 */
.articles {
    margin: 20px;
    padding: 20px;
    border:1px solid #dfdfdf ;
}
.articles:hover{
    box-shadow:1px 2px 2px 1px rgba(0,0,0,.3);
}
.articles a:hover{
    color: #ea7716;
}
.articles_info{
    width: 98%;
    margin: 0 auto;
    border-top:1px dashed #dfdfdf ;
    padding-top: 5px;
}
.article_view p {
    line-height: 30px;
    font-size: 16px;
    text-indent:2em;
}
.article_info{
    height: 30px;
    text-align: center;
}
.article_info span{
    margin-left: 15px;
    color: #8e8a87;
    font-size: 14px;
}
.page{
    height: 60px;
    width: 100%;
    padding: 10px;
    border: 1px dashed gray;
    margin-top: 15px;
}

/* 工作 work */
.work_img{
    width: 250px;
    height: 140px;
    border: 4px solid #e7e7e7;
}
.work_img:hover{
    border: 4px solid #ea7716;
}
/* 游戏 game */
.game_img{
    width: 250px;
    height: 140px;
    /*border: 4px solid #627e87;*/
    border: 4px solid #400A0A;
    opacity: .9;
}
.game_img:hover{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); 	/* IE 9 */
    -moz-transform:rotate(7deg); 	/* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); 	/* Opera */
    opacity: 1;
    transition:all 0.6s ease;
}

/* 留言评论 */
.comment{
    background-color: #ddd;
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.1) inset;
    border-radius: 3px;
    padding: 15px 30px;
    margin-top: 20px;
}
.comment_left{
    background-color: #ddd;
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.1) inset;
    border-radius: 3px;
    border:1px solid #dfdfdf;
    padding: 10px 30px;
    margin-top: 20px;
    margin-left: 30px;
}
.message {
    background-color: #ddd;
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.1) inset;
    border-radius: 3px;
    border:1px solid #dfdfdf;
    padding: 10px 5px;
    margin-top: 20px;
    /*margin-left: 30px;*/
}
.comment_left ul li {
    height: 30px;
    width: 100%;
    background: url(../images/li.png) no-repeat 0 3px;
    padding-left: 15px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.comment_left ul li a{
    color:#3b3b39;
    width: 100%;
}
.username{
    width: 60px;
    background: url("../images/icon-name.jpg") -20px -4px;
}
.email{
    width:60px;
    background: url("../images/icon-mail.jpg") -20px -4px;
}
.url{
    width: 60px;
    background: url("../images/icon-web.jpg") -20px -4px;
}

/* 个人介绍 */
.myhome img{
    width: 37px;
    border-radius: 37px;
    margin: 7px 10px 0 10px;
}
.location{
    height: 400px;
    background-image: url(../images/p_bannar.jpg);
}
.home-information-wrap{
    line-height: 1;
    padding-bottom: 10px;
}
.home-information-box{
    margin: 0 auto;
    padding-bottom: 35px;
    position: relative;
}
.information-headimg-box{
    width: 180px;
    height: 180px;
    border: 4px solid #ffffff;
    background-color:#fff;
    position: absolute;
    left: 50%;
    margin-left: -94px;
    top: -95px;
    overflow:hidden;
    border-radius: 90px;
}
.bg_game{
    background:url("../images/bg-download.jpg");
}

.game-headimg-box{
    width: 80px;
    height: 80px;
    border: 4px solid #fff;
    background-color:#fff;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    top: 20px;
    overflow:hidden;
    border-radius: 90px;
}
.information-content-wrap{
    padding-top: 60px;
}
.people-nick-name{
    margin-top: 20px;
    font-size: 24px;
    color: #444;
}
.user-background{
    padding-top: 10px;
    font-size: 12px;
    color: #666;
}

/*  图标 */
.author{
    height: 20px;
    display: inline-block;
    padding-left: 20px;
    background: url("../images/icon-3.png") 0 2px no-repeat;
}
.source{
    height: 20px;
    display: inline-block;
    padding-left: 20px;
    background: url("../images/icon-4.png") 0 2px no-repeat;
}
.time{
    height: 20px;
    display: inline-block;
    padding-left: 20px;
    background: url("../images/icon-5.png") 0 2px no-repeat;
}
.views{
    height: 20px;
    display: inline-block;
    padding-left: 20px;
    background: url("../images/icon-2.png") 0 2px no-repeat;
}

/*  底部导航  */
#bottom {
    clear: both;
    width: 100%;
    height: 100%;
    border-top: 4px solid;
    background: url(../images/menu-bg-1.jpg) repeat;
    position: relative;
    z-index: 5;
    margin-top: -84px;
    padding-bottom: 80px;
    padding-top: 80px;
    font-size: 14px;
    color: #8e8a87;
}
.link_h3{
    font-size: 22px;
    line-height: 30px;
    width: 100%;
    border-bottom: 1px solid #565656;
    color: #ea7716;
    margin:0 20px 30px;
}
#bottom ul{
    margin-left: 20px;
}
#bottom ul li{
    display: block;
    float: left;
    padding: 0 10px;
    line-height: 25px;
    background: #4f4f4f;
    margin: 0 5px 10px 0;
    font-size: 12px;
}
#bottom ul li:hover {
    background-color: #ea7716;
    border-radius: 5px;
}
#bottom a{
    color: #8e8a87;
}
#bottom a:hover{
    color: #fff;
}

/* padding */
.p0{
    padding: 0;
}
.p15{
    padding: 15px;
}
.pl15{
    padding-left: 15px;
}
.pr15{
    padding-right: 15px;
}
.pt5{
    padding-top:5px ;
}
.pl20{
    padding-left: 20px;
}
.pr20{
    padding-right: 20px;
}
.pb5{
    padding-bottom: 5px;
}
/* margin */
.auto{
    margin: 0 auto;
}
.mt5{
    margin-top: 5px;
}
.mt10{
    margin-top: 10px;
}
.mb20{
    margin-bottom: 20px;
}
.mpt8{
    margin-top: 8%;
}
.mr5{
    margin-right: 5px;
}
.ml20{
    margin-left: 20px;
}
/* background-color */
.bg-fff{
    background-color: #fff;
}
/* color */
.c-627e87{
    color: #627e87;
}
.c-666{
    color: #666;
}
.c-fff{
    color: #ffffff;
}
.c-#41403e{
    color: #41403e;
}
.c-3b3b39{
    color: #3b3b39;
}
.c-ea7716{
    color: #ea7716;
}
/* font size */
.f14{
    font-size: 14px;
}
.f16{
    font-size: 16px;
}
.f18{
    font-size: 18px;
}
.f20{
    font-size: 20px;
}
.f28{
    font-size: 28px;
}
.fb{
    font-weight: bold;
}

/* width */
.w70{
    width: 60%;
}
/* height */
.h70{
    height: 100%;
}
/* position */
.left-100{
    left: -100px;
}
.pa{
    position: absolute;
}
.pr{
    position: relative;
}
.b{
    width: 14px;
    height: 14px;
    margin-right: 5px;
    margin-top: -2px;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

/* border */
.bdb{
    border-bottom: 1px dashed gray;
}
.br50{
    border-radius: 50%;
}

/* 小屏样式调整 */
@media (max-width:620px){
    body{
        padding-top: 20px;
    }
    body section {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 1rem;
    }
    body section button {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
        margin-bottom: 2rem;
    }
    .index-banner .dots {
        bottom: 10px;
    }

    /* 主页 */
    #content {
        width: 90%;
        height: 100%;
        margin: 50px auto 0;
        padding-bottom: 50px;
    }
    section.awSlider{
        padding: 0;
    }

    .comment_left{
        margin-left: 0;
    }
    .article_info{
        margin-bottom: 20px;
    }
    .articles {
        margin: 10px;
        padding: 10px;
        border:1px solid #dfdfdf ;
    }
    .bg_game{
        background:url("../images/bg-download.jpg") -620px 0;

    }
}